<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="referrer" content="never">
  <title>RGB to HEX 在线转换器</title>

  <style>
  </style>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>

<body style="font-size: 16px">
  <h2 style="text-align: center">RGB to HEX 在线转换器</h2><br/>
  <article class="post"><div class="content post__content clearfix" style="padding: 20px 40px;">
  <style>
  .form-label,.form-input{display:block;margin-bottom:8px}
  .form-input{padding:10px;font-size:16px}
  .form-group{margin:auto;min-width:50%}
  .input-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}
  .input-group-append,.input-group-prepend{margin-right:-2px;display:flex}
  .input-group-text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:6px 16px;margin-bottom:0;font-size:16px;font-weight:700;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:4px;min-width:60px}
  .form-control{display:block;width:100%;padding:6px 4.5px;font-size:16px;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da!important;border-radius:4px!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
  .input-group>.form-control:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}
  .input-group>.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
  .input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
  .input-group>.form-control{position:relative!important;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:auto;width:auto!important;margin-bottom:0!important;padding:10px!important;text-indent:15px;}
  .input-group{padding-bottom:20px}
  .input-group>.input-group-append>.icon-button{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
  .icon-button{margin-right: 2px;display:inline-block!important;font-weight:400!important;text-align:center!important;white-space:nowrap!important;vertical-align:middle!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;border:1px solid transparent!important;padding:6px 4.5px!important;font-size:16!important;line-height:1.5!important;border-radius:4px!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out!important;background-color:#ced4da;border-color:#ced4da!important;border-left:none!important}
  .icon-button:active{background-color:#e9ecef}
  .icon-copy{background:url(./img/clipboard.svg)no-repeat 16px 16px;padding-left:45px!important}
  .form-converter>h3 {margin: 0 0 20px!important;}
  /* Alerts */
  .alert-notification {position: fixed;top: 0;left: 0;right: 0;margin-left: auto;margin-right: auto;text-align: center;padding: 4.5px 24px;margin-bottom: 1rem;border: 1px solid transparent;border-radius: 1.5px!important;color: #004085;background-color: #cce5ff;border-color: #063261;margin: 20px;padding: 20px;z-index: 1000}
  /* Animate opacity */
  @keyframes fade {from { opacity: 1 }to { opacity: 0 }}
  @-moz-keyframes fade {from { opacity: 1 }to { opacity: 0 }}
  @-webkit-keyframes fade {from { opacity: 1 }to { opacity: 0 }}
  .converter-icon i {display: block;max-width: 100%;height: auto;margin: 1.0em auto 1.1em auto;} i {vertical-align: middle;text-align: center;}
  .table-scroll table{width: 100%;table-layout: auto;margin-bottom: 20px;margin-bottom: 1.25rem;border-spacing: 0;border-collapse: collapse;border-top: 1px solid #ebebeb;border-left: 1px solid #ebebeb;}
  .table-scroll thead {display: table-header-group;vertical-align: middle;border-color: inherit;}
  .table-scroll tr {display: table-row;vertical-align: inherit;border-color: inherit;}
  .table-scroll th {font-weight: 700;}
  .table-scroll td, th {padding: 5px 10px;border-right: 1px solid #ebebeb;border-bottom: 1px solid #ebebeb;}
  .table-scroll tbody {display: table-row-group;vertical-align: middle;border-color: inherit;}
  </style>
  <form class="form-converter"><h3>输入 RGB 颜色值</h3><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">R</div></div><input type="number" id="valueR" name="valueR" class="form-control" onchange="changeInValueR(this.value)"></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">G</div></div><input type="number" id="valueG" name="valueG" class="form-control" onchange="changeInValueG(this.value)"></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">B</div></div><input type="number" id="valueB" name="valueB" class="form-control" onchange="changeInValueB(this.value)"></div><figure class="converter-icon center">
  <i class="fa fa-refresh fa-2x"></i>
  </figure><h3>转换成十六进制值</h3><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">Hex</div></div><input type="text" id="hex" name="hex" class="form-control" onclick="this.select()" onchange="changeInHex(this.value)"><div class="input-group-append"><button class="icon-button icon-copy" type="button" onclick="copyHexToClipboard()"></button></div></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">Color</div></div><input type="text" id="colorDisplay" name="colorDisplay" class="form-control" readonly="" style="background-color: rgb(2, 0, 0);"></div></form><p><em>注意: 你也可以输入十六进制值转换为RGB。</em></p><p><br></p>
  <hr>
  <h3 id="frequently-used-color-codes">常用的颜色码</h3><div style="overflow-x: auto;" class="table-scroll"><table><thead><tr style="text-align:left"><th>Color</th><th>Name</th><th>#RRGGBB (Hex Code)</th><th>R,G,B (Decimal code)</th></tr></thead><tbody><tr><td style="background:maroon">&nbsp;</td><td>maroon</td><td>#800000</td><td>(128,0,0)</td></tr><tr><td style="background:#8b0000">&nbsp;</td><td>dark red</td><td>#8B0000</td><td>(139,0,0)</td></tr><tr><td style="background:brown">&nbsp;</td><td>brown</td><td>#A52A2A</td><td>(165,42,42)</td></tr><tr><td style="background:#b22222">&nbsp;</td><td>firebrick</td><td>#B22222</td><td>(178,34,34)</td></tr><tr><td style="background:#dc143c">&nbsp;</td><td>crimson</td><td>#DC143C</td><td>(220,20,60)</td></tr><tr><td style="background:red">&nbsp;</td><td>red</td><td>#FF0000</td><td>(255,0,0)</td></tr><tr><td style="background:tomato">&nbsp;</td><td>tomato</td><td>#FF6347</td><td>(255,99,71)</td></tr><tr><td style="background:coral">&nbsp;</td><td>coral</td><td>#FF7F50</td><td>(255,127,80)</td></tr><tr><td style="background:#cd5c5c">&nbsp;</td><td>indian red</td><td>#CD5C5C</td><td>(205,92,92)</td></tr><tr><td style="background:#f08080">&nbsp;</td><td>light coral</td><td>#F08080</td><td>(240,128,128)</td></tr><tr><td style="background:#e9967a">&nbsp;</td><td>dark salmon</td><td>#E9967A</td><td>(233,150,122)</td></tr><tr><td style="background:salmon">&nbsp;</td><td>salmon</td><td>#FA8072</td><td>(250,128,114)</td></tr><tr><td style="background:#ffa07a">&nbsp;</td><td>light salmon</td><td>#FFA07A</td><td>(255,160,122)</td></tr><tr><td style="background:#ff4500">&nbsp;</td><td>orange red</td><td>#FF4500</td><td>(255,69,0)</td></tr><tr><td style="background:#ff8c00">&nbsp;</td><td>dark orange</td><td>#FF8C00</td><td>(255,140,0)</td></tr><tr><td style="background:orange">&nbsp;</td><td>orange</td><td>#FFA500</td><td>(255,165,0)</td></tr><tr><td style="background:gold">&nbsp;</td><td>gold</td><td>#FFD700</td><td>(255,215,0)</td></tr><tr><td style="background:#b8860b">&nbsp;</td><td>dark golden rod</td><td>#B8860B</td><td>(184,134,11)</td></tr><tr><td style="background:#daa520">&nbsp;</td><td>golden rod</td><td>#DAA520</td><td>(218,165,32)</td></tr><tr><td style="background:#eee8aa">&nbsp;</td><td>pale golden rod</td><td>#EEE8AA</td><td>(238,232,170)</td></tr><tr><td style="background:#bdb76b">&nbsp;</td><td>dark khaki</td><td>#BDB76B</td><td>(189,183,107)</td></tr><tr><td style="background:khaki">&nbsp;</td><td>khaki</td><td>#F0E68C</td><td>(240,230,140)</td></tr><tr><td style="background:olive">&nbsp;</td><td>olive</td><td>#808000</td><td>(128,128,0)</td></tr><tr><td style="background:#ff0">&nbsp;</td><td>yellow</td><td>#FFFF00</td><td>(255,255,0)</td></tr><tr><td style="background:#9acd32">&nbsp;</td><td>yellow green</td><td>#9ACD32</td><td>(154,205,50)</td></tr><tr><td style="background:#556b2f">&nbsp;</td><td>dark olive green</td><td>#556B2F</td><td>(85,107,47)</td></tr><tr><td style="background:#6b8e23">&nbsp;</td><td>olive drab</td><td>#6B8E23</td><td>(107,142,35)</td></tr><tr><td style="background:#7cfc00">&nbsp;</td><td>lawn green</td><td>#7CFC00</td><td>(124,252,0)</td></tr><tr><td style="background:#7fff00">&nbsp;</td><td>chart reuse</td><td>#7FFF00</td><td>(127,255,0)</td></tr><tr><td style="background:#adff2f">&nbsp;</td><td>green yellow</td><td>#ADFF2F</td><td>(173,255,47)</td></tr><tr><td style="background:#006400">&nbsp;</td><td>dark green</td><td>#006400</td><td>(0,100,0)</td></tr><tr><td style="background:green">&nbsp;</td><td>green</td><td>#008000</td><td>(0,128,0)</td></tr><tr><td style="background:#228b22">&nbsp;</td><td>forest green</td><td>#228B22</td><td>(34,139,34)</td></tr><tr><td style="background:#0f0">&nbsp;</td><td>lime</td><td>#00FF00</td><td>(0,255,0)</td></tr><tr><td style="background:#32cd32">&nbsp;</td><td>lime green</td><td>#32CD32</td><td>(50,205,50)</td></tr><tr><td style="background:#90ee90">&nbsp;</td><td>light green</td><td>#90EE90</td><td>(144,238,144)</td></tr><tr><td style="background:#98fb98">&nbsp;</td><td>pale green</td><td>#98FB98</td><td>(152,251,152)</td></tr><tr><td style="background:#8fbc8f">&nbsp;</td><td>dark sea green</td><td>#8FBC8F</td><td>(143,188,143)</td></tr><tr><td style="background:#00fa9a">&nbsp;</td><td>medium spring green</td><td>#00FA9A</td><td>(0,250,154)</td></tr><tr><td style="background:#00ff7f">&nbsp;</td><td>spring green</td><td>#00FF7F</td><td>(0,255,127)</td></tr><tr><td style="background:#2e8b57">&nbsp;</td><td>sea green</td><td>#2E8B57</td><td>(46,139,87)</td></tr><tr><td style="background:#66cdaa">&nbsp;</td><td>medium aqua marine</td><td>#66CDAA</td><td>(102,205,170)</td></tr><tr><td style="background:#3cb371">&nbsp;</td><td>medium sea green</td><td>#3CB371</td><td>(60,179,113)</td></tr><tr><td style="background:#20b2aa">&nbsp;</td><td>light sea green</td><td>#20B2AA</td><td>(32,178,170)</td></tr><tr><td style="background:#2f4f4f">&nbsp;</td><td>dark slate gray</td><td>#2F4F4F</td><td>(47,79,79)</td></tr><tr><td style="background:teal">&nbsp;</td><td>teal</td><td>#008080</td><td>(0,128,128)</td></tr><tr><td style="background:#008b8b">&nbsp;</td><td>dark cyan</td><td>#008B8B</td><td>(0,139,139)</td></tr><tr><td style="background:#0ff">&nbsp;</td><td>aqua</td><td>#00FFFF</td><td>(0,255,255)</td></tr><tr><td style="background:#0ff">&nbsp;</td><td>cyan</td><td>#00FFFF</td><td>(0,255,255)</td></tr><tr><td style="background:#e0ffff">&nbsp;</td><td>light cyan</td><td>#E0FFFF</td><td>(224,255,255)</td></tr><tr><td style="background:#00ced1">&nbsp;</td><td>dark turquoise</td><td>#00CED1</td><td>(0,206,209)</td></tr><tr><td style="background:#40e0d0">&nbsp;</td><td>turquoise</td><td>#40E0D0</td><td>(64,224,208)</td></tr><tr><td style="background:#48d1cc">&nbsp;</td><td>medium turquoise</td><td>#48D1CC</td><td>(72,209,204)</td></tr><tr><td style="background:#afeeee">&nbsp;</td><td>pale turquoise</td><td>#AFEEEE</td><td>(175,238,238)</td></tr><tr><td style="background:#7fffd4">&nbsp;</td><td>aqua marine</td><td>#7FFFD4</td><td>(127,255,212)</td></tr><tr><td style="background:#b0e0e6">&nbsp;</td><td>powder blue</td><td>#B0E0E6</td><td>(176,224,230)</td></tr><tr><td style="background:#5f9ea0">&nbsp;</td><td>cadet blue</td><td>#5F9EA0</td><td>(95,158,160)</td></tr><tr><td style="background:#4682b4">&nbsp;</td><td>steel blue</td><td>#4682B4</td><td>(70,130,180)</td></tr><tr><td style="background:#6495ed">&nbsp;</td><td>corn flower blue</td><td>#6495ED</td><td>(100,149,237)</td></tr><tr><td style="background:#00bfff">&nbsp;</td><td>deep sky blue</td><td>#00BFFF</td><td>(0,191,255)</td></tr><tr><td style="background:#1e90ff">&nbsp;</td><td>dodger blue</td><td>#1E90FF</td><td>(30,144,255)</td></tr><tr><td style="background:#add8e6">&nbsp;</td><td>light blue</td><td>#ADD8E6</td><td>(173,216,230)</td></tr><tr><td style="background:#87ceeb">&nbsp;</td><td>sky blue</td><td>#87CEEB</td><td>(135,206,235)</td></tr><tr><td style="background:#87cefa">&nbsp;</td><td>light sky blue</td><td>#87CEFA</td><td>(135,206,250)</td></tr><tr><td style="background:#191970">&nbsp;</td><td>midnight blue</td><td>#191970</td><td>(25,25,112)</td></tr><tr><td style="background:navy">&nbsp;</td><td>navy</td><td>#000080</td><td>(0,0,128)</td></tr><tr><td style="background:#00008b">&nbsp;</td><td>dark blue</td><td>#00008B</td><td>(0,0,139)</td></tr><tr><td style="background:#0000cd">&nbsp;</td><td>medium blue</td><td>#0000CD</td><td>(0,0,205)</td></tr><tr><td style="background:#00f">&nbsp;</td><td>blue</td><td>#0000FF</td><td>(0,0,255)</td></tr><tr><td style="background:#4169e1">&nbsp;</td><td>royal blue</td><td>#4169E1</td><td>(65,105,225)</td></tr><tr><td style="background:#8a2be2">&nbsp;</td><td>blue violet</td><td>#8A2BE2</td><td>(138,43,226)</td></tr><tr><td style="background:indigo">&nbsp;</td><td>indigo</td><td>#4B0082</td><td>(75,0,130)</td></tr><tr><td style="background:#483d8b">&nbsp;</td><td>dark slate blue</td><td>#483D8B</td><td>(72,61,139)</td></tr><tr><td style="background:#6a5acd">&nbsp;</td><td>slate blue</td><td>#6A5ACD</td><td>(106,90,205)</td></tr><tr><td style="background:#7b68ee">&nbsp;</td><td>medium slate blue</td><td>#7B68EE</td><td>(123,104,238)</td></tr><tr><td style="background:#9370db">&nbsp;</td><td>medium purple</td><td>#9370DB</td><td>(147,112,219)</td></tr><tr><td style="background:#8b008b">&nbsp;</td><td>dark magenta</td><td>#8B008B</td><td>(139,0,139)</td></tr><tr><td style="background:#9400d3">&nbsp;</td><td>dark violet</td><td>#9400D3</td><td>(148,0,211)</td></tr><tr><td style="background:#9932cc">&nbsp;</td><td>dark orchid</td><td>#9932CC</td><td>(153,50,204)</td></tr><tr><td style="background:#ba55d3">&nbsp;</td><td>medium orchid</td><td>#BA55D3</td><td>(186,85,211)</td></tr><tr><td style="background:purple">&nbsp;</td><td>purple</td><td>#800080</td><td>(128,0,128)</td></tr><tr><td style="background:#d8bfd8">&nbsp;</td><td>thistle</td><td>#D8BFD8</td><td>(216,191,216)</td></tr><tr><td style="background:plum">&nbsp;</td><td>plum</td><td>#DDA0DD</td><td>(221,160,221)</td></tr><tr><td style="background:violet">&nbsp;</td><td>violet</td><td>#EE82EE</td><td>(238,130,238)</td></tr><tr><td style="background:#f0f">&nbsp;</td><td>magenta<b> / </b>fuchsia</td><td>#FF00FF</td><td>(255,0,255)</td></tr><tr><td style="background:orchid">&nbsp;</td><td>orchid</td><td>#DA70D6</td><td>(218,112,214)</td></tr><tr><td style="background:#c71585">&nbsp;</td><td>medium violet red</td><td>#C71585</td><td>(199,21,133)</td></tr><tr><td style="background:#db7093">&nbsp;</td><td>pale violet red</td><td>#DB7093</td><td>(219,112,147)</td></tr><tr><td style="background:#ff1493">&nbsp;</td><td>deep pink</td><td>#FF1493</td><td>(255,20,147)</td></tr><tr><td style="background:#ff69b4">&nbsp;</td><td>hot pink</td><td>#FF69B4</td><td>(255,105,180)</td></tr><tr><td style="background:#ffb6c1">&nbsp;</td><td>light pink</td><td>#FFB6C1</td><td>(255,182,193)</td></tr><tr><td style="background:pink">&nbsp;</td><td>pink</td><td>#FFC0CB</td><td>(255,192,203)</td></tr><tr><td style="background:#faebd7">&nbsp;</td><td>antique white</td><td>#FAEBD7</td><td>(250,235,215)</td></tr><tr><td style="background:beige">&nbsp;</td><td>beige</td><td>#F5F5DC</td><td>(245,245,220)</td></tr><tr><td style="background:bisque">&nbsp;</td><td>bisque</td><td>#FFE4C4</td><td>(255,228,196)</td></tr><tr><td style="background:#ffebcd">&nbsp;</td><td>blanched almond</td><td>#FFEBCD</td><td>(255,235,205)</td></tr><tr><td style="background:wheat">&nbsp;</td><td>wheat</td><td>#F5DEB3</td><td>(245,222,179)</td></tr><tr><td style="background:#fff8dc">&nbsp;</td><td>corn silk</td><td>#FFF8DC</td><td>(255,248,220)</td></tr><tr><td style="background:#fffacd">&nbsp;</td><td>lemon chiffon</td><td>#FFFACD</td><td>(255,250,205)</td></tr><tr><td style="background:#fafad2">&nbsp;</td><td>light golden rod yellow</td><td>#FAFAD2</td><td>(250,250,210)</td></tr><tr><td style="background:#ffffe0">&nbsp;</td><td>light yellow</td><td>#FFFFE0</td><td>(255,255,224)</td></tr><tr><td style="background:#8b4513">&nbsp;</td><td>saddle brown</td><td>#8B4513</td><td>(139,69,19)</td></tr><tr><td style="background:sienna">&nbsp;</td><td>sienna</td><td>#A0522D</td><td>(160,82,45)</td></tr><tr><td style="background:#d2691e">&nbsp;</td><td>chocolate</td><td>#D2691E</td><td>(210,105,30)</td></tr><tr><td style="background:peru">&nbsp;</td><td>peru</td><td>#CD853F</td><td>(205,133,63)</td></tr><tr><td style="background:#f4a460">&nbsp;</td><td>sandy brown</td><td>#F4A460</td><td>(244,164,96)</td></tr><tr><td style="background:#deb887">&nbsp;</td><td>burly wood</td><td>#DEB887</td><td>(222,184,135)</td></tr><tr><td style="background:tan">&nbsp;</td><td>tan</td><td>#D2B48C</td><td>(210,180,140)</td></tr><tr><td style="background:#bc8f8f">&nbsp;</td><td>rosy brown</td><td>#BC8F8F</td><td>(188,143,143)</td></tr><tr><td style="background:#ffe4b5">&nbsp;</td><td>moccasin</td><td>#FFE4B5</td><td>(255,228,181)</td></tr><tr><td style="background:#ffdead">&nbsp;</td><td>navajo white</td><td>#FFDEAD</td><td>(255,222,173)</td></tr><tr><td style="background:#ffdab9">&nbsp;</td><td>peach puff</td><td>#FFDAB9</td><td>(255,218,185)</td></tr><tr><td style="background:#ffe4e1">&nbsp;</td><td>misty rose</td><td>#FFE4E1</td><td>(255,228,225)</td></tr><tr><td style="background:#fff0f5">&nbsp;</td><td>lavender blush</td><td>#FFF0F5</td><td>(255,240,245)</td></tr><tr><td style="background:linen">&nbsp;</td><td>linen</td><td>#FAF0E6</td><td>(250,240,230)</td></tr><tr><td style="background:#fdf5e6">&nbsp;</td><td>old lace</td><td>#FDF5E6</td><td>(253,245,230)</td></tr><tr><td style="background:#ffefd5">&nbsp;</td><td>papaya whip</td><td>#FFEFD5</td><td>(255,239,213)</td></tr><tr><td style="background:#fff5ee">&nbsp;</td><td>sea shell</td><td>#FFF5EE</td><td>(255,245,238)</td></tr><tr><td style="background:#f5fffa">&nbsp;</td><td>mint cream</td><td>#F5FFFA</td><td>(245,255,250)</td></tr><tr><td style="background:#708090">&nbsp;</td><td>slate gray</td><td>#708090</td><td>(112,128,144)</td></tr><tr><td style="background:#789">&nbsp;</td><td>light slate gray</td><td>#778899</td><td>(119,136,153)</td></tr><tr><td style="background:#b0c4de">&nbsp;</td><td>light steel blue</td><td>#B0C4DE</td><td>(176,196,222)</td></tr><tr><td style="background:#e6e6fa">&nbsp;</td><td>lavender</td><td>#E6E6FA</td><td>(230,230,250)</td></tr><tr><td style="background:#fffaf0">&nbsp;</td><td>floral white</td><td>#FFFAF0</td><td>(255,250,240)</td></tr><tr><td style="background:#f0f8ff">&nbsp;</td><td>alice blue</td><td>#F0F8FF</td><td>(240,248,255)</td></tr><tr><td style="background:#f8f8ff">&nbsp;</td><td>ghost white</td><td>#F8F8FF</td><td>(248,248,255)</td></tr><tr><td style="background:#f0fff0">&nbsp;</td><td>honeydew</td><td>#F0FFF0</td><td>(240,255,240)</td></tr><tr><td style="background:ivory">&nbsp;</td><td>ivory</td><td>#FFFFF0</td><td>(255,255,240)</td></tr><tr><td style="background:azure">&nbsp;</td><td>azure</td><td>#F0FFFF</td><td>(240,255,255)</td></tr><tr><td style="background:snow">&nbsp;</td><td>snow</td><td>#FFFAFA</td><td>(255,250,250)</td></tr><tr><td style="background:#000">&nbsp;</td><td>black</td><td>#000000</td><td>(0,0,0)</td></tr><tr><td style="background:#696969">&nbsp;</td><td>dim gray / dim grey</td><td>#696969</td><td>(105,105,105)</td></tr><tr><td style="background:gray">&nbsp;</td><td>gray / grey</td><td>#808080</td><td>(128,128,128)</td></tr><tr><td style="background:#a9a9a9">&nbsp;</td><td>dark gray / dark grey</td><td>#A9A9A9</td><td>(169,169,169)</td></tr><tr><td style="background:silver">&nbsp;</td><td>silver</td><td>#C0C0C0</td><td>(192,192,192)</td></tr><tr><td style="background:#d3d3d3">&nbsp;</td><td>light gray / light grey</td><td>#D3D3D3</td><td>(211,211,211)</td></tr><tr><td style="background:#dcdcdc">&nbsp;</td><td>gainsboro</td><td>#DCDCDC</td><td>(220,220,220)</td></tr><tr><td style="background:#f5f5f5">&nbsp;</td><td>white smoke</td><td>#F5F5F5</td><td>(245,245,245)</td></tr><tr><td style="background:#fff">&nbsp;</td><td>white</td><td>#FFFFFF</td><td>(255,255,255)</td></tr></tbody></table></div>
  </div></article>
  <script>
  const changeInValueR = (valueR) => {
    const valueG = document.getElementById("valueG").value;
    const valueB = document.getElementById("valueB").value;
    _convertRgbToHex(valueR, valueG, valueB);
  }
  const changeInValueG = (valueG) => {
    const valueR = document.getElementById("valueR").value;
    const valueB = document.getElementById("valueB").value;
    _convertRgbToHex(valueR, valueG, valueB);
  }
  const changeInValueB = (valueB) => {
    const valueR = document.getElementById("valueR").value;
    const valueG = document.getElementById("valueG").value;
    _convertRgbToHex(valueR, valueG, valueB);
  }
  const changeInHex = (hex) => _convertHexToRgb(hex);
  const _convertRgbToHex = (R, G, B) => {
    const hex = '#' + _rgbToHex(R) + _rgbToHex(G) + _rgbToHex(B);
    const hexElement = document.getElementById("hex");
    const colorDisplayElement = document.getElementById("colorDisplay");
    hexElement.value = hex;
    colorDisplayElement.style.backgroundColor = hex;
  }
  const _convertHexToRgb = (hex) => {
    if(hex){
      hex = hex.replace('#', '');
      const R = parseInt(hex.substring(0,2), 16) || 0;
      const G = parseInt(hex.substring(2,4), 16) || 0;
      const B = parseInt(hex.substring(4,6), 16) || 0;
      document.getElementById("valueR").value = R;
      document.getElementById("valueG").value = G;
      document.getElementById("valueB").value = B;
      document.getElementById("colorDisplay").style.backgroundColor = `rgb(${R}, ${G}, ${B})`;
    }
  }
  const _rgbToHex = (rgb) => { 
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
         hex = "0" + hex;
    }
    return hex;
  };
  const copyHexToClipboard = () => {
    const hexValue = document.getElementById("hex").value;
    copyToClipboard(hexValue);
    if(hexValue){
      alertNotification("Copied to clipboard: " + hexValue);
    }else{
      alertNotification("Nothing to copy");
    }
  }
  ///
    // Copies a string to the clipboard.
    const copyToClipboard = (text) => {
      if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData("Text", text);
      }
      else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
          return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
          console.warn("Copy to clipboard failed.", ex);
          return false;
        }
        finally {
          document.body.removeChild(textarea);
        }
      }else if(navigator.clipboard){
        navigator.clipboard.writeText(text).then(function() {
          console.log('Async: Copying to clipboard was successful!');
          return true;
        }, function(err) {
          console.error('Async: Could not copy text: ', err);
          return false;
        });
      }
      return false;
    }
    const alertNotification = (msg, duration=3000) => {
      var el = document.createElement("div");
      el.setAttribute("class", "alert-notification");
      el.style.animation = "fade "+duration+"ms ease";
      el.innerHTML = msg; 
      setTimeout(function(){
        el.parentNode.removeChild(el);
      }, duration);
      document.body.appendChild(el);
    }
  </script>
</body>

</html>